import type { DetailedHTMLProps, FC, ImgHTMLAttributes } from "react";
import { headers } from "next/headers";

interface IndexProps
  extends DetailedHTMLProps<
    ImgHTMLAttributes<HTMLImageElement>,
    HTMLImageElement
  > {}

const Image: FC<IndexProps> = (props: any) => {
  const headersList = headers();
  const accept: any = headersList.get("accept");
  const isSupportWebp: boolean = accept.includes("image/webp");
  let src = props.src;
  if (!isSupportWebp) {
    if (props.src?.includes(".webp")) {
      src = props.src?.replace(".webp", ".png");
    }
  } else {
    if (!props.src?.includes(".webp")) {
      if (props.src?.includes("?")) {
        src = props.src;
      } else {
        src = `${props.src}?imageMogr/format/webp`;
      }
    }
  }
  return <img {...props} src={src} />;
};

export default Image;
